<template>
       <xdh-curd class="config-group" 
       :mixin="groupMixin" name="group" 
       :pager="false"
       :page-size="pageSize"
       :query.sync="query" :model="model"
       ref="tableCurd"
       :addable="false"
       :handle-column-width="300">
      <template slot="table-tool">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleOpenAdd">添加分组</el-button>
      </template>
      <!-- 查询表单 -->
      <template slot="filter-items">
        <el-form-item prop="keyword">
          <el-input placeholder="关键字" v-model="query.keyword"></el-input>
        </el-form-item>
      </template>

      <!-- 显示列表 -->
      <template slot="table-columns" slot-scope="scope">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="分组名称" prop="name"></el-table-column>
        <el-table-column label="分组ID" prop="id"></el-table-column>
        <el-table-column label="创建日期" prop="createTime"></el-table-column>
        <el-table-column label="创建人" prop="creator"></el-table-column>
      </template>
      <!-- 操作按钮-->
      <template slot="table-handle-column" slot-scope="scope">
        <el-button  size="mini"
                           @click="orderUp(scope.row, scope.$index)">上移
                </el-button>
                <el-button  size="mini" 
                           @click="orderDown(scope.row, scope.$index)">下移
                </el-button> 
      </template>
      <!-- 新增/修改弹窗 -->
      <template slot="dialog-form-items" slot-scope="prop">
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="prop.model.name"></el-input>
        </el-form-item>
      </template>

    </xdh-curd>
</template>
<script>
import XdhCurd from '@/widgets/xdh-curd';
import groupMixin from '@/base/mixin/group';
export default {
  components: {
    XdhCurd
  },
  data() {
    return {
      pageSize: 99,
      query: {
        keyword: ''
      },
      model: {
        name: '',
        title: ''
      },
      groupMixin: groupMixin
    };
  },
  methods: {
       handleOpenAdd() {
        this.$refs.tableCurd.dialogMode = 'insert'
        this.$refs.tableCurd.currentModel = {...this.$refs.tableCurd.model}
        this.$refs.tableCurd.dialogClosed = false
      },
      orderUp(row, index) {
        console.log(row, index);
      },
      orderDown(row, index) {
        console.log(row, index);
      }
  }
};
</script>
<style  type="text/scss" lang="scss" scoped>
</style>